<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <head th:include="common/common_head :: commonHead('web代码生成器')"></head>
</head>
<body>
<div class="x-body" style="margin: 20px auto; width: 1000px; ">
    <form class="layui-form layui-form-pane" style="margin-left: 20px;" onsubmit="return false" >
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <select name="tableName" lay-filter="tableName" id="tableName">
                    <option value="">请选择生成实体</option>
                    <option th:each="item : ${formList}">
                        <option th:value="${item.tableName}"><span th:text="${item.entityName}"></span></option>
                    </option>
                </select>
            </div>
            <!--<div class="layui-input-inline">
                <button class="layui-btn layui-btn-sm icon-position-button" id="refresh" style="float: right;"
                        data-type="reload">重新加载配置<i class="layui-icon">&#xe669;</i>
                </button>
            </div>-->
            <div class="layui-form-item">
                【控件类型】为radio, checkbox, select时，<span style="color:red">【控件选项值】</span>项为JSON格式; ： [{"text":"", "value":""},{"text":"", "value":""}]
            </div>
        </div>
        <div th:each="table : ${formList}">
            <div th:attr="id=${table.tableName}" style="display: none">
                <div th:each="field : ${table.fields}">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label  class="layui-form-label">属性名</label>
                            <div class="layui-input-inline">
                                <input type="text" id="propertyName" name="propertyName" autocomplete="off"
                                       class="layui-input" readonly="true" th:value="${field.formFieldName}"/>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label  class="layui-form-label">是否出现</label>
                            <div class="layui-input-inline">
                                <input type="checkbox" name="appear" id="appear" lay-skin="switch" lay-filter=""
                                       lay-text="是|否" th:attr="checked=${field.appear} == true ? 'true' : 'false'"/>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label  class="layui-form-label">显示名称</label>
                            <div class="layui-input-inline">
                                <input type="text" id="labelName" name="labelName" autocomplete="off"
                                       class="layui-input" th:value="${field.labelName}"/>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label  class="layui-form-label">是否必填</label>
                            <div class="layui-input-inline">
                                <input type="checkbox" name="required" id="required" lay-skin="switch"
                                       lay-text="是|否" lay-filter="" th:attr="selected=${field.required} == true ? 'true' : 'false'"/>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label  class="layui-form-label">控件类型</label>
                            <div class="layui-input-inline">
                                <select name="formType" lay-verify="" lay-filter="formType">
                                    <option value="text">文本框</option>
                                    <option value="hidden" th:attr="selected=${field.primaryKey} == true ? 'true' : 'false'">隐藏域</option>
                                    <option value="textarea" th:attr="selected=${field.formType} == 'textarea' ? 'true' : 'false'">文本域</option>
                                    <option value="file" th:attr="selected=${field.formType} == 'file' ? 'true' : 'false'">上传文件</option>
                                    <option value="radio" th:attr="selected=${field.formType} == 'radio' ? 'true' : 'false'">单选框</option>
                                    <option value="checkbox" th:attr="selected=${field.formType} == 'checkbox' ? 'true' : 'false'">复选框</option>
                                    <option value="switch" th:attr="selected=${field.formType} == 'switch' ? 'true' : 'false'">switch框</option>
                                    <option value="select" th:attr="selected=${field.formType} == 'select' ? 'true' : 'false'">下列框</option>
                                    <option value="date" th:attr="selected=${field.formType} == 'date' ? 'true' : 'false'">日期控件</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label  class="layui-form-label">控件选项值</label>
                            <div class="layui-input-inline">
                                <input type="text" name="values" autocomplete="off"  class="layui-input"  title="控件选项值"
                                    th:value="${field.values == null ? '' : T(com.alibaba.fastjson.JSON).toJSONString(field.values)} "/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item" style=" float: right;margin-right: 30px;margin-top: 8px">
            <button  class="layui-btn layui-btn-normal" lay-filter="add" lay-submit="x">
                保存配置
            </button>
            <button  class="layui-btn layui-btn-primary" id="next">
                下一步
            </button>
            <p style="color:red">先保存配置, 再点击下一步生成代码</p>
        </div>
    </form>
</div>
<script type="text/javascript"> /*<![CDATA[*/
layui.use(['form', 'layer'], function () {
    $ = layui.jquery;
    var form = layui.form , layer = layui.layer;

    var tableName;
    form.on('select(tableName)', function(data){
        if(tableName){
            $("div#" + tableName).hide();
        }

        if(!data.value){
            return;
        }
        tableName = data.value;
        $("div#" + tableName).show();
    });

    form.on('submit(add)', function (data) {
        if(!data.field.tableName){
            layuiUtils.toastMsg({content: '请选择保存的实体!',icon:'fail', anim:'fail'});
            return false;
        }
        var tableName = data.field.tableName;
        var fields = [];

        var fieldNames = $("div#" + tableName + " input[name='propertyName']");
        var appears = $("div#" + tableName + " input[name='appear']"); //document.getElementsByName("appear");
        var labelNames = $("div#" + tableName + " input[name='labelName']"); //document.getElementsByName("labelName");
        var formTypes = $("div#" + tableName + " select[name='formType']"); //document.getElementsByName("formType");
        var requireds = $("div#" + tableName + " input[name='required']"); //document.getElementsByName("required");
        var values = $("div#" + tableName + " input[name='values']"); //document.getElementsByName("values");
        for(var i = 0; i < fieldNames.length; i++){
            var appear = (appears[i].checked  ? true : false);
            var required = (requireds[i].checked ? true : false);
            var val = values[i].value;
            var object = null;
            if(val){
                try{
                    object = JSON.parse(val);
                }catch(e){
                    var msg = "属性【" + fieldNames[i].value + "】对应的控件选项值JSON格式错误";
                    layuiUtils.toastMsg({content: msg, icon:'fail', anim:'fail'});
                    return false;
                }
            }

            fields.push({formFieldName:fieldNames[i].value, appear:appear,required:required
                ,labelName:labelNames[i].value,formType:formTypes[i].value, values: object ? object : null});
        }
        var formData = {tableName:tableName, fields:JSON.stringify(fields)};
        var url =  /*[[@{/auto/save}]]*/ "/auto/save";
        layuiUtils.doRequest(url, formData);
        return false;
    });

    $("#next").click(function () {
        var url =  /*[[@{/auto/next}]]*/ "/auto/next";
        document.location = url;
    });
    /*$("#refresh").click(function () {
        var url =  /!*[[@{/auto/config}]]*!/ "/auto/config";
        document.location = url + "?action=reload";
    })*/
    form.render();
});
/*]]>*/</script>
</body>
</html>
